<template>
  <base-layout
    dialog-title="审核"
    :dialog-visible="dialogVisible"
    @dialog-close="dialogClose"
    dialogWidth="800px">
    <template #searchPanel>
      <search-panel ref="searchPanel" v-slot="{ form }" @search="search" :selectPer="authConfig.query">
        <el-input   v-model="form.auditNum" clearable placeholder="关联单号" style="width: 200px"/>
        <job-shop v-model="form.storeId" placeholder="申请门店" />
        <el-input   v-model="form.initiator" clearable placeholder="发起人" style="width: 200px"/>
        <el-date-picker
          v-model="dateList"
          type="daterange"
          start-placeholder="创建开始日期"
          end-placeholder="创建结束日期"
          clearable
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </search-panel>
    </template>

    <template #contentPanel>
      <data-table
        :value="tableData"
        :total-count="totalCount"
        :has-action="true"
        :table-column-attributes="tableColumnAttributes"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :width="160"
      >
        <template #action="{row}">
          <i class="el-icon-s-check pointer" title="审批" v-permission="authConfig.audit" @click="approvalHandle(row)"></i>
        </template>
      </data-table>
    </template>
    <template #dialog>
      <task-detail :task-id="approvalData.id"/>
      <approval-form :approval-data="approvalData"  @save="approvalSave"/>
    </template>
  </base-layout>
</template>

<script>
  import baseMixin from '@/mixins/base'
  import ApprovalForm from '@/components/CommonForm/ApprovalForm'
  import { pageList, auditIsOk } from '@/api/pre-sale/taskCenter/auditTask'
  import TaskDetail from '../myTask/taskDetail'

  export default {
    components: {
      ApprovalForm,
      TaskDetail
    },
    mixins: [
      baseMixin({
        findData: pageList,
        dataName: ['content', 'totalRecords'],
        idName: 'id',
        format(res) {
          return res.map(data => {
            return data
          })
        }
      })
    ],
    data() {
      this.authConfig = {
        query: 'audit:page',
        audit: 'audit:auditIsOk'
      }

      return {
        dialogVisible: false,
        dateList: [],
        tableColumnAttributes: [
          { name: '关联单号', value: 'auditNum', type: 'text' },
          { name: '流程名称', value: 'processName', type: 'text' },
          { name: '申请门店', value: 'storeName', type: 'text' },
          { name: '发起人', value: 'initiator', type: 'text' },
          { name: '发起时间', value: 'auditCreateTime', type: 'text' },
          { name: '状态', value: 'status', type: 'text' },
          { name: '备注', value: 'remark', type: 'text' }
        ],
        approvalData: {}
      }
    },
    methods: {
      approvalHandle(row) {
        this.dialogVisible = true
        
        this.approvalData = row
      },
      search(form) {
        this.searchOptions = {
          storeId: form.storeId,
          auditNum: form.auditNum,
          initiator: form.initiator,
          status: '待审批'
        }
        if (this.dateList) {
          this.searchOptions.minTime = this.dateList[0]
          this.searchOptions.maxTime = this.dateList[1]
        }
        this.currentPage = 1
        this.setTableData()
      },
      approvalSave(data) {
        auditIsOk({...data}).then(res => {
          this.setTableData()
          this.dialogVisible = false
        })
      }
    },
    mounted() {
    }
  }
</script>

<style lang="scss" scoped>
  .vLine {
    border-left: solid 3px black;
    height: 16px;
    vertical-align: bottom;
    display: inline-block;
  }
</style>
